<%--
  Created by IntelliJ IDEA.
  User: 闫光辉
  Date: 2023/4/1
  Time: 22:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style>

        html,
        body {
            margin: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /* background:#000; */
            /* background: url("img/9.jpg") ; */
            background: linear-gradient(#e66465, #9198e5);
        }

        /*最外层容器样式*/
        .wrap {
            position: relative;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 300px;
            height: 300px;
            margin: auto;
            /*改变左右上下,图片方块移动*/
        }

        /*包裹所有容器样式*/
        #cube {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate 20s infinite;
            animation-play-state: running;
        }

        .pic:hover {
            border: rgb(189, 27, 143) 4px solid;
        }

        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }


        #cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all 0.4s;
        }

        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }

        #cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }

        #cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        #cube .out_left {
            transform: rotateY(90deg) translateZ(100px);
        }

        #cube .out_right {
            transform: rotateY(-90deg) translateZ(100px);
        }

        #cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }

        #cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        /*鼠标移入后样式*/
        #cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);

        }

        #cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);

        }

        #cube:hover .out_left {
            transform: rotateY(90deg) translateZ(200px);

        }

        #cube:hover .out_right {
            transform: rotateY(-90deg) translateZ(200px);

        }

        #cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);

        }

        #cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);

        }

    </style>
</head>
<body>
<div class="wrap">
    <div id="cube" onclick="stop()">
        <div class="out_front">
            <a data-bs-toggle="modal" data-bs-target="#myModal" data-src="${pathList.get(0)}"><img
                    src="${pathList.get(0)}"
                    class="pic"/></a>
        </div>
        <div class="out_back">
            <a data-bs-toggle="modal" data-bs-target="#myModal" data-src="${pathList.get(1)}"><img
                    src="${pathList.get(1)}"
                    class="pic"/></a>
        </div>
        <div class="out_left">
            <a data-bs-toggle="modal" data-bs-target="#myModal" data-src="${pathList.get(2)}"><img
                    src="${pathList.get(2)}"
                    class="pic"/></a>
        </div>
        <div class="out_right">
            <a data-bs-toggle="modal" data-bs-target="#myModal" data-src="${pathList.get(3)}"><img
                    src="${pathList.get(3)}"
                    class="pic"/></a>
        </div>
        <div class="out_top">
            <a data-bs-toggle="modal" data-bs-target="#myModal" data-src="${pathList.get(4)}"><img
                    src="${pathList.get(4)}"
                    class="pic"/></a>
        </div>
        <div class="out_bottom">
            <a data-bs-toggle="modal" data-bs-target="#myModal" data-src="${pathList.get(5)}"><img
                    src="${pathList.get(5)}"
                    class="pic"/></a>
        </div>
    </div>
</div>


<div class="modal fade" id="myModal">
    <div class="modal-dialog" style=" max-width:60% !important;">
        <div class="modal-content">
            <div id="_modalDialog_body" class="modal-body">
                <div id="selectTree" class="ztree" style="height:500px;overflow:auto; ">
                    <img id="img" style="width: 100%;height: 100%;" src="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var btnThis = $(event.relatedTarget);
        var modal = $(this);
        var src = btnThis.data('src');
        document.getElementById('img').src = src;

    });
    var a = 1;
    window.onload = function () {
        let oA = document.querySelector("#a1");
        let timer = null;

        function autoPlay() {
            if (oA.paused) {
                oA.paused = false;
                oA.play();
            } else {
                clearInterval(timer);
            }
        }

        timer = setInterval(autoPlay, 1);
    }

    function stop() {
        console.log(a)
        if (a % 2 == 1) {
            document.getElementById("cube").style.animationPlayState = "running";
            a++;
        } else {
            document.getElementById("cube").style.animationPlayState = "paused";
            a++;
        }
    }

</script>
</html>
